<template>
	<view class="container">
		<view class="title">
			<view class="search">
				<view class="title_search">
					<span class="iconfont">&#xe67d;</span>
					<form @submit="search" report-submit="true">
						<input type="text" :name="where.keyword" v-model="where.keyword" :placeholder="$t('index.search.title')" confirm-type='search'/>
					</form>		
				</view>
			</view>
		
		<view class="popup_group">
			<view class="popup_group_item" @click="selectPlatform2">
				<view class="popup_group_item_label">{{$t('Platform.classification')}}</view>
				<view class="popup_group_item_value">
					<view class="popup_group_item_message">
						<span v-if="setFormData.cate_name" class="popup_group_item_message_value">{{ setFormData.cate_name }}</span>
						<span v-else>{{$t('Please.select.platform.classification')}}</span>
					</view>
					<view><span class="iconfont">&#xe6bd;</span></view>
				</view>
			</view>
			</view>
		</view>
		<view v-if="shopList.length">
			<block v-for="(item, index) in shopList" :key="index">
				<view class="shop_list">
					<view class="shop_list_item">
						<view class="shop_list_item_shop">
							<view class="shop_list_item_shop_image">
								<image :src="item.image"></image>
							</view>
							<view class="shop_list_item_shop_con">
								<view class="shop_list_item_shop_con_title line1">{{ item.store_name }}</view>
								<view class="shop_list_item_shop_con_price">
									<span>${{ item.price }}</span>
									&emsp;<span>{{$t('buying.price')}}:${{ item.jh_price }}</span>
								</view>
							</view>
						</view>
						<view class="shop_list_item_handle">
							<view class="shop_button" style="color:#fff;border:none;"  @click="reduction(item, index)">{{$t('Delivery')}}</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<Loading :loaded="loaded" :loading="loading"></Loading>
		
		<view v-if="show_cat" class="choose_type">
			<view class="popup_group">
				<view class="popup_group_item" @click="selectPlatform">
					<view class="popup_group_item_label">{{$t('index.cate')}}</view>
					<view class="popup_group_item_value">
						<view class="popup_group_item_message">
							<span v-if="cate_name" class="popup_group_item_message_value">{{cate_name}}</span>
							<span v-else>{{$t('Please.select.classification')}}</span>
						</view>
						<view><span class="iconfont">&#xe6bd;</span></view>
					</view>
				</view>
			</view>
			<view class="handle"><view class="handle_button" @click="handleNextStep">{{$t('ok')}}</view></view>
		</view>
		<!-- 选择平臺分類弹框 -->
		<uni-popup ref="select_platform" type="bottom">
			<platfrom @close="closePlatfrom" :classifiedData="platformClassificationData" @getPlatData="getPlatData"></platfrom>
		</uni-popup>
		
		
		<uni-popup ref="select_platform2" type="bottom">
			<platfrom @close="closePlatfrom2" :classifiedData="platformClassificationData2" @getPlatData="getPlatData2"></platfrom>
		</uni-popup>
		
	</view>
	
</template>

<script>

import { copyproductLstApi, copyproductformApi, copyproductformpostApi,categoryList } from 'api/product.js';

import Loading from '@/components/Loading/index.vue';
import platfrom from '../components/platform.vue';

import { Toast, Modal, navigateTo,getStorage,  removeStorage } from 'libs/uniApi.js';

export default {
	components: {
		Loading,
		platfrom, // 选择平臺分類组件
	},
	data() {
		return {
			type: 1,
			tabClick: 0,
			tabLeft: 0,
			isLeft: 0, //导航栏下划线位置
			isWidth: 0, //每個导航栏占位
			childIndex: 0,
			menuList: [],
			merId: '',
			shopList: [],
			loaded: false,
			loading: false,
			where: {
				page: 1,
				limit: 15,
				keyword: '',
				cate_id: '',
			},
			cate_id: 0,
			product_id: 0,
			show_cat: false,
			cate_name: '',
			canNotReade: true,
			platformClassificationData: [], // 平臺分類数据
			setFormData: {
				cate_name: '', // 平臺名稱
			},
		};
	},
	created() {
		var that = this;
		// 获取设备宽度
		uni.getSystemInfo({
			success(e) {
				that.isWidth = e.windowWidth / 5;
			}
		});
	},

	onLoad(opt) {
		this.merId = opt.mer_id;
		this.$set(this, 'type', opt.type ? Number(opt.type) : 1);
		this.initData();
	},
	onShow() {},
	// 下拉到底部
	onReachBottom() {
		this.initData();
	},
	methods: {
		initData() {
			var that = this;
			if (that.loading || that.loaded) return;
			that.loading = true;
			copyproductLstApi(this.merId, { ...this.where, type: this.type }).then(
				res => {
					that.loading = false;
					that.loaded = res.data.list.length < that.where.limit;
					that.shopList.push.apply(that.shopList, res.data.list);
					that.where.page = that.where.page + 1;
				},
				error => {
					that.$util.Tips({
						title: error.msg
					});
				}
			);
		
			categoryList(this.merId).then(
				res => {
					this.platformClassificationData2 = res.data;
				},
				error => {
					that.$util.Tips({
						title: error.msg
					});
				}
			);
		},
		search(){
			let that = this;
			that.loading = that.loaded = false;
			that.where.page = 1;
			that.shopList = [];
			that.initData();
		},
		// 选择分類
		selectPlatform2() {
			this.$refs.select_platform2.open();
		},
		// 關闭频臺分類
		closePlatfrom2() {
			this.$refs.select_platform2.close();
		},
		// 获取平臺類数据
		getPlatData2(item, taplist) {
			let that = this;
			this.where.cate_id = item.value;
			this.setFormData.cate_name = item.label;
			this.$refs.select_platform2.close(); 
			that.loading = that.loaded = false;
			that.where.page = 1;
			that.shopList = [];
			this.initData();
		},
		// 铺货
		reduction(obj, index) {
			copyproductformApi(this.merId, obj.product_id)
				.then(res => {					
					// 获取平臺分類
					// console.log(res.data.rule[0]['props']['options']);
					this.show_cat = true;
					this.product_id = obj.product_id;
					this.platformClassificationData = res.data.rule[0].props.options;
					
				})
				.catch(err => {
					return this.$util.Tips({
						title: err
					});
				});
		},
		handleNextStep() {
			copyproductformpostApi(this.merId, this.product_id , { mer_cate_id: this.cate_id })
				.then(res => {
					this.$util.Tips({ title: res.message, icon: 'none' });
					this.shopList.splice(index, 1);
					this.show_cat = false;
				})
				.catch(err => {
					this.show_cat = false;
					return this.$util.Tips({
						title: err
					});
				});
		},
		// 选择分類
		selectPlatform() {
			this.$refs.select_platform.open();
		},
		// 關闭频臺分類
		closePlatfrom() {
			this.$refs.select_platform.close();
		},
		// 获取平臺類数据
		getPlatData(item, taplist) {
			this.cate_id = item.value;
			this.cate_name = item.label;
			this.$refs.select_platform.close(); 
		}
	}
};
</script>

<style lang="scss" scoped>
@import './scss/index.scss';

.popup_group {
  background: #fff;
  margin: 14px auto;
  width: 340px;
  font-size: 14px;
  border-radius: 4px;
}
.popup_group .popup_group_item {
  padding: 15px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.popup_group .popup_group_item .popup_group_item_value {
  display: flex;
  align-items: center;
}
.popup_group .popup_group_item .popup_group_item_value .popup_group_item_message {
  margin-right: 7px;
  color: #bbbbbb;
  max-width: 192px;
}
.popup_group .popup_group_item .popup_group_item_value .popup_group_item_message_value {
  color: #000;
}
.popup_group .popup_group_item .popup_group_item_value .iconfont {
  color: #bbbbbb;
}
.popup_group .popup_group_item .popup_group_item_value uni-input {
  text-align: right;
}
.popup_group > uni-view:not(:last-child) {
  border-bottom: 1px solid #eeeeee;
}
.longTab {
	display: flex;
	width: 100%;
	/* #ifdef H5 */
	padding-bottom: 20rpx;
	/* #endif */
	/* #ifdef MP */
	padding-top: 12rpx;
	padding-bottom: 12rpx;
	/* #endif */
	.longItem {
		height: 50upx;
		display: inline-block;
		line-height: 50upx;
		text-align: center;
		font-size: 30rpx;
		color: #282828;
		max-width: 160rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		overflow-x: scroll;
		overflow-y: hidden;
		/*解决ios上滑动不流畅*/
		-webkit-overflow-scrolling: touch;

		&.click {
			font-weight: bold;
			font-size: 30rpx;
			color: #e93323;
			.underline {
				opacity: 1;
			}
		}
	}

	.underlineBox {
		height: 3px;
		width: 20%;
		display: flex;
		align-content: center;
		justify-content: center;
		transition: 0.5s;

		.underline {
			width: 60rpx;
			height: 4rpx;
			background-color: #e93323;
		}
	}
}
.title_search {
	background: #f5f5f5;
	border-radius: 30rpx;
	height: 60rpx;
	padding-left: 60rpx;
	position: relative;
	.iconfont {
		position: absolute;
		top: 50%;
		margin-top: -14rpx;
		left: 30rpx;
		font-size: 28rpx;
	}
	input {
		height: 60rpx;
		font-size: 26rpx;
		margin-left: 20rpx;
	}
}
.shop_button {
	margin-left: 18rpx;
	padding: 0 34rpx;
	height: 60rpx;
	border: 1px solid #c7c7c7;
	border-radius: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 30rpx;
	font-size: 26rpx;
	color: #fff ;
	background-color: #e93323;
}
.shop_list {
	margin-top: 20rpx;
	padding: 0 20rpx;

	&_item {
		padding: 30rpx;
		background: #ffffff;
		border-radius: 10px;
		margin-bottom: 20rpx;
		&_shop {
			display: flex;
			&_image,
			uni-image {
				width: 150rpx;
				height: 150rpx;
				border-radius: 16rpx;
				position: relative;
				image {
					width: 150rpx;
					height: 150rpx;
				}
			}
			position: relative;
			.spec {
				color: #ffffff;
				background: rgba(0, 0, 0, 0.5);
				border-radius: 16rpx 0 16rpx 0;
				text-align: center;
				font-size: 18rpx;
				display: inline-block;
				width: 84rpx;
				line-height: 30rpx;
				position: absolute;
				bottom: 0;
				right: 0;
			}
			&_con {
				flex: 1;
				display: flex;
				flex-direction: column;
				margin-left: 20rpx;
				padding-bottom: 12rpx;

				&_title {
					font-size: 28rpx;
					color: #282828;
					max-width: 500rpx;
					padding-top: 4rpx;
				}
				&_message {
					margin-top: 15rpx;
					font-size: 22rpx;
					color: #868686;
					> span:nth-child(1) {
						display: inline-block;
						margin-right: 20rpx;
					}
				}

				&_price {
					margin-top: 10rpx;
					> span {
						display: inline-block;
						margin-right: 7rpx;
						font-size: 30rpx;
						color: #e93323;
					}
					> del {
						color: #bebebe;
						font-size: 26rpx;
					}
				}
			}
		}
		&_handle {
			display: flex;
			justify-content: flex-end;
			> view {
				margin-left: 18rpx;
				padding: 0 34rpx;
				height: 60rpx;
				border: 1px solid #c7c7c7;
				border-radius: 30px;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 30rpx;
				font-size: 26rpx;
				color: #999999;
			}
		}
	}
}
.choose_type{
	position: fixed;
    top: 22%;
    width: 92%;
    height: 34%;
    background: #fff;
    margin: 0 auto;
    font-size: 14px;
    border-radius: 12px;
    left: 4%;
    box-shadow: 0 0 14px 7px #ccc;
	.popup_group{
		margin: 31px auto;
		.popup_group_item{
			padding: 15px 14px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.popup_group_item_value{
				display: flex;
				align-items: center;
			}
		}
	}
	.handle_button{
		width: 300px;
		height: 41px;
		background: #e93323;
		border-radius: 43px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 15px;
		color: #ffffff;
		margin: 10px auto;
	}
	
}
</style>
